<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        background-color: thistle;
      }
      button {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <button>开始</button>
  </body>
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <script>
    // window.onload = function () {
    //   var btn = document.querySelector("button");
    //   var div = document.querySelector("div");

    //   var timer,
    //     begin = 0,
    //     target = 500;
    //   btn.addEventListener("click", function () {
    //     // 先清除定时器，再设置定时器
    //     clearInterval(timer);
    //     timer = setInterval(function () {
    //       // 起始值 += （结束值 - 起始值）* 缓动系数
    //       begin += (target - begin) * 0.2;
    //       // 如果开始等于目标值就停止动画
    //       if (Math.round(begin) >= target) {
    //         begin = target;
    //         clearInterval(timer);
    //       }
    //       div.style.marginLeft = begin + "px";
    //     }, 100);
    //   });
    // };

    /*----------------------------封装之前----------------------------------------*/

    /*-----------------------------封装之后---------------------------------------*/

    window.onload = function () {
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      var timer,
        begin = 0,
        target = 500;
      btn.addEventListener("click", function () {
        // 实参
        move(timer, begin, target, 0.3, 100);
      });
      //   封装函数
      //   形参
      function move(timer, begin, target, ratio, interval) {
        // 先清除定时器，再设置定时器
        clearInterval(timer);
        timer = setInterval(function () {
          // 起始值 += （结束值 - 起始值）* 缓动系数
          begin += (target - begin) * ratio;
          // 如果开始等于目标值就停止动画
          if (Math.round(begin) >= target) {
            begin = target;
            clearInterval(timer);
          }
          div.style.marginLeft = begin + "px";
        }, interval);
      }
    };
  </script>
</html>
